<template>
  <BaseInfoHeader></BaseInfoHeader>
  <BaseInfoContent :tableInfo="tableInfo" :rules="rules" @changePageFn="changePageFn">
    <template #operate>
     <el-table-column fixed="right" label="Operations" width="120">
        <template #default>
          <el-button link type="primary" size="small">Detail</el-button>
          <el-button link type="primary" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </template>
  </BaseInfoContent>
</template>

<script>
import { ref } from 'vue'
import BaseInfoHeader from '@/components/BaseInfoHeader.vue'
import BaseInfoContent from '@/components/BaseInfoContent.vue'
import { warehouseAPI, changePageAPI } from '@/api/baseInfo.js'
export default {
  components: { BaseInfoHeader, BaseInfoContent },
  setup () {
    const params = {
      // like_code=&like_name=&current=1&size=10&descs=createTime
      like_code: null,
      like_name: null,
      current: 1,
      size: 10,
      descs: 'createTime'
    }
    // 表单数据，传到BaseInfoContent
    const tableInfo = ref({})
    // 定义table中的数据和表头
    const rules = ref([])
    warehouseAPI(params).then(res => {
      tableInfo.value = res.data
      // console.log(res.data)
      rules.value = [{ prop: 'code', name: '仓库编码' }, { prop: 'name', name: '仓库名称' }, { prop: 'type', name: '仓库类型' }, { prop: 'location', name: '省/市/区' }, { prop: 'address', name: '详细地址' }, { prop: 'status', name: '仓库状态' }, { prop: 'surface', name: '仓库面积m²' }, { prop: 'includedNum', name: '库区数量' }, { prop: 'personName', name: '负责人' }, { prop: 'phone', name: '联系电话' }, { prop: 'updateTime', name: '更新时间' }]
    })

    // const paramsPage = { current: 1, size: 10 }
    // const changePageFn = changePageAPI(paramsPage).then(res => {
    //   console.log(res)
    // })
    function changePageFn (paramsPage) {
      return changePageAPI(paramsPage).then(res => {
        // console.log(res)
        tableInfo.value = res.data
      })
    }

    return { tableInfo, rules, changePageFn }
  }
}
</script>

<style>
</style>
